<template>
<div :class="c1Class">这是一个div</div>
<!-- 当flag的值为true的时候,ok样式生效,否则不生效 -->
<div :class="{ok : flag}">这是一个div</div>
<!-- class属性与class绑定属性可以同时存在 -->
<div class="c1" :class="{ok : flag}">这是一个div</div>
<!-- 
    可以存在多个选项,下面demo含义如下
    当flag值为false时,!flag的值则为true,那么error样式生效
    当flag值为true时,ok样式生效
-->
<div :class="{error: !flag,ok : flag}">这是一个div</div>
<!-- 
    校验输入的数据,当用户输入的数据长度为4-16位时校验通过,使用ok样式
    否则校验失败,使用error样式
-->
<input type="text" :class="{ok : flag, error: !flag}" @input="check($event.target.value)">
<!-- 其值可以是一个数组,表示绑定了多种class样式 -->
<div :class="[okClass,c1Class]">这是一个div</div>
<!-- 所有带有-的样式名都需要加引号 -->
<p :style="{color:color,'font-size': fs}">这是一个段落</p>
<!-- 当属性名与属性值相同时,可以简写 -->
<p :style="{color,'font-size': fs}">这是一个段落</p>

</template>
<script setup>
import { ref } from 'vue';
const c1Class = ref('c1')
const flag = ref(true)
const okClass = ref('ok')
const color = ref('pink')
const fs = ref('20px')

function check(value){
    flag.value = value.length >= 4 && value.length <= 16;
}

</script>
<style>
.c1{
    font-size:2rem;
}
.ok{
    color:green;
}
.error{
    color:red;
}
</style>